<template>
  <div class="wap">
    <!-- -->
    <div class="login">
      <div class="user">
        <span>账号:</span>
        <input :class="usersty ? 'stress':''"
               type="text"
               v-model="user"
               @click="inputClick(0)"
               placeholder="5~12位数字、字母(大写或小写)或混合">
      </div>
      <div class="pwd">
        <span>密码:</span>
        <input :class="pwdsty ? 'stress':''"
               :type="show ? 'password':'text'"
               v-model="pwd"
               @click="inputClick(1)"
               placeholder="6~12位包含字母(大写或小写)和数字">
        <img src="/imgs/yanjing.png"
             alt=""
             @click="yanjing">
      </div>

      <div>
        <button class="login_but"
                @click="login">登录</button>
        <button class="register_but"
                @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from '@/axios'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// import bus from '@/bus'
// import { useCounterStore } from '@/stores/ceshi'
export default {
  setup() {
    // const { proxy } = getCurrentInstance()
    //路由跳转
    const router = useRouter()
    //用户名
    let user = ref('')
    const userName = /^[A-Za-z0-9]{5,12}$/
    //密码
    let pwd = ref('')
    const pwdName = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,12}$/
    //验证码
    let yzm = ref('')
    //眼睛
    let show = ref(true)
    //错误提示语
    let useMsg = function (a) {
      return ElMessage({
        message: a,
        type: 'error',
        offset: 150,
        duration: 5000,
        center: true
      })
    }
    //账号错误输入框提示
    let usersty = ref(false)
    //密码错误输入框提示
    let pwdsty = ref(false)
    //点击输入框去除提示
    const inputClick = (a) => {
      if (a == 0) {
        usersty.value = false
      } else {
        pwdsty.value = false
      }
    }
    //点击查看密码
    const yanjing = () => {
      if (show.value) {
        show.value = false
        if (!show.value) {
          setTimeout(() => {
            show.value = true
          }, 3000)
        }
      }
    }
    onMounted(() => {})

    //传送登录数据
    const login = () => {
      if (userName.test(user.value)) {
        if (pwdName.test(pwd.value)) {
          axios
            .post('/glylogin', { username: user.value, password: pwd.value })
            .then((d) => {
              // console.log(d[1][0].username)
              if (d[0] == '登录成功') {
                usersty.value = false
                pwdsty.value = false
                // 跳转至首页
                router.replace('/index')
                setTimeout(() => {
                  // location.reload()
                }, 10)
                localStorage.setItem('gly', d[1][0].username)
                localStorage.setItem('dakaiindex', '1')
              } else if (d == '账号错误') {
                usersty.value = true
                useMsg(d)
              } else {
                pwdsty.value = true
                useMsg(d)
              }
            })
            .catch((err) => console.log(err))
        } else {
          pwdsty.value = true
          useMsg('密码错误,由6~12位数字和字母(大写或小写)混合组成')
        }
      } else {
        usersty.value = true
        useMsg('账号错误,长度为5~12位字母(大小写)、数字或混合组成')
      }
    }
    //取消按钮
    const cancel = () => {
      user.value = ''
      pwd.value = ''
      router.replace('/')
    }

    const handleKeyDown = (event) => {
      if (event.key === 'Enter') {
        // alert('Enter key pressed!');
        // 在这里添加按下回车键后的处理逻辑
        login()
      }
    }

    onMounted(() => {
      document.addEventListener('keydown', handleKeyDown)
    })

    onUnmounted(() => {
      document.removeEventListener('keydown', handleKeyDown)
    })
    return {
      user,
      pwd,
      yzm,
      login,
      cancel,
      yanjing,
      show,
      useMsg,
      usersty,
      pwdsty,
      inputClick
    }
  }
}
</script>
<style lang="less" scoped>
.wap {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  // background: url(/imgs/login_beijingtu.webp) no-repeat;
  // background: url(/imgs/000.gif) no-repeat;
  // background-size: cover;
  background-image: linear-gradient(to bottom right, #f8f1c7, #eeecde);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  .login {
    width: 500px;
    height: 300px;
    border-radius: 10% 25%;
    border-bottom: #cdbf62 8px solid;
    border-left: #cdbf62 8px solid;
    border-right: #cdbf62 8px dashed;
    border-top: #cdbf62 8px dashed;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(
      to bottom,
      rgba(249, 239, 241, 0.8),
      rgba(255, 255, 255, 0.8)
    );
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    .user {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        width: 50px;
      }
    }
    input {
      width: 250px;
      border: 1px solid #ccc;
      height: 30px;
      border-radius: 5px;
    }
    input:focus {
      border: 1px solid #333;
      outline: none; //这个可以把原来的线去掉
    }
    .stress {
      width: 250px;
      border: 2px solid #e90505;
      height: 30px;
      border-radius: 5px;
    }
    .pwd {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
      position: relative;
      span {
        width: 50px;
      }
      img {
        width: 25px;
        height: 20px;
        position: absolute;
        right: 5px;
        top: 15px;
      }
    }
    .forgot_pwd {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-size: 14px;
      color: #e90505;
      cursor: pointer;
    }
    .nohave_user {
      position: absolute;
      left: 40px;
      bottom: 20px;
      font-size: 14px;
      color: #e90505;
      cursor: pointer;
    }

    // .yzm {
    //   width: 300px;
    //   height: 50px;
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
    //   input {
    //     width: 152px;
    //     border: 1px solid #ccc;
    //     height: 30px;
    //     border-radius: 5px;
    //     margin-left: -15px;
    //   }
    //   .fs {
    //     display: inline-block;
    //     background-color: #eee;
    //     padding: 3px 10px;
    //   }
    // }
    button {
      width: 100px;
      height: 30px;
      margin: 0 15px;
    }
    .login_but {
      background-color: #f8f1c7;
    }
  }
}
</style>